<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 
            1. flex是flex-grow flex-shrink? || flex-basis的简写
            2. flex-grow: 占据flex container在剩余空间main axis上的比例
            3. flex-shrink: 决定了flex item在main axis上的收缩比例
            4. flex-basis: 决定了flex item在main axis上的初始长度
            5. order: 设置flex item的排列顺序
            6. align-self允许flex items覆盖flex container在自身轴上的空间
        */
        .container {
            border: 1px solid #000 ;
            width: 400px;
            height: 400px;
            margin-left: 20px;
            margin-top: 20px;
            display: flex;    
            flex-direction: row;
            /* align-items: center; */
        }

        .item {
            width: 100px; 
            height: 100px;
            font-size: 50px;
            color: aliceblue;
            text-align: center;
            line-height: 100px;
        }

        .item:nth-of-type(1) {
            background: red;
            width: 110px;
            flex-shrink: 1;
            /* 当主轴有多余空间的时候，可以进行扩展，当几个元素比例和大于1，即按照比例来分，若是小于1，则直接通过剩余的乘以比例 */
            /* flex-grow: 0.2; */
        }

        .item:nth-of-type(2) {
            background: green;
            width: 120px;
            flex-shrink: 2;
            /* flex-grow: 0.2; */
            /* order值越小，排在越后 */
            /* order: 1;
            align-self: flex-start; */
        }

        .item:nth-of-type(3) {
            background: blue;
            width: 130px;
            flex-shrink: 3;
            /* flex-grow: 0.2; */
            /* order: -1;
            align-self: flex-end; */
        }

        .item:nth-of-type(4) {
            background: yellow;
            width: 140px;
            flex-shrink: 4;
        }

        .item:nth-of-type(5) {
            background: orange;
            width: 150px;
            flex-shrink: 5;
        }

        .item:nth-of-type(6) {
            background: purple;
            width: 160px;
            flex-shrink: 6;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
        <div class="item">6</div>
    </div>
</body>
</html>